<template>
  <!-- 主业资料查询 -->
  <div class="dataquery-page page-container">
    <el-tabs class="flex-column full-height" @tab-click="onTabClick">
      <template v-for="(item, index) in tabList">
        <el-tab-pane :key="index" :label="item.label">
          <div class="full-height full-width no-scroll-x no-scroll-y flex-column">
            <data-list :ref="`dataList${index}`" :dataConfig="item.dataConfig" :tableData="item.tableData"></data-list>
          </div>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import DataList from '@/components/business/page-comp/data-list/data-list.vue';
import api from '../api/index.js';
export default {
  name: 'DataqueryPage',
  components: { DataList },
  data() {
    return {
      tabIndex: 0,
      tabList: [
        {
          label: '优选清单',
          dataConfig: {},
          tableData: {
            data: [],
            total: 0,
          },
        },
        {
          label: '可视化物料清单',
          dataConfig: {},
          tableData: {
            data: [],
            total: 0,
          },
        },
        {
          label: '标准化目录',
          dataConfig: {},
          tableData: {
            data: [],
            total: 0,
          },
        },
        {
          label: '物料参考价格',
          dataConfig: {},
          tableData: {
            data: [],
            total: 0,
          },
        },
        {
          label: '批次合理交货期要求',
          dataConfig: {},
          tableData: {
            data: [],
            total: 0,
          },
        },
        {
          label: '固化ID',
          dataConfig: {},
          tableData: {
            data: [],
            total: 0,
          },
        },
      ],
    };
  },
  computed: {},
  beforeDestroy() { },
  created() {
    // 优选清单页面的表格数据配置
    this.tabList[0].dataConfig = {
      search: {
        labelWidth: '100px',
        resultKey: 'materialListList',
        loading: false,
        form: {
          materialCode: '',
        },
        conditions: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '大类描述',
            prop: 'divisionDesc',
            type: 'text',
            width: '220',
          },
          {
            label: '中类描述',
            prop: 'groupDesc',
            type: 'text',
            width: '220',
          },
          {
            label: '小类描述',
            prop: 'classDesc',
            type: 'text',
            width: '220',
          },
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'text',
            width: '180',
          },
          {
            label: '物料描述',
            prop: 'materialDesc',
            type: 'text',
          },
          {
            label: '分级',
            prop: 'grade',
            type: 'text',
            width: '180',
          },
        ],
      }
    };
    // 可视化清单页面的表格数据配置
    this.tabList[1].dataConfig = {
      search: {
        labelWidth: '100px',
        resultKey: 'data',
        loading: false,
        form: {
          materialCode: '',
          extendCode: '',
        },
        conditions: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'input',
          },
          {
            label: '扩展编码',
            prop: 'extendCode',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '大类描述',
            prop: 'divisionDesc',
            type: 'text',
            width: '220',
          },
          {
            label: '中类描述',
            prop: 'groupDesc',
            type: 'text',
            width: '220',
          },
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'text',
            width: '180',
          },
          {
            label: '物料描述',
            prop: 'materialDesc',
            type: 'text',
          },
          {
            label: '扩展编码',
            prop: 'extendCode',
            type: 'text',
          },
          {
            label: '扩展描述',
            prop: 'extendDesc',
            type: 'text',
          },
          {
            label: '固化ID',
            prop: 'standId',
            type: 'text',
          },
          {
            label: '单位',
            prop: 'unit',
            type: 'text',
            width: '100',
          },
        ],
      }
    };
    // 标准化目录页面的表格数据配置
    this.tabList[2].dataConfig = {
      search: {
        labelWidth: '100px',
        resultKey: 'standardCatalogueList',
        loading: false,
        form: {
          materialCode: '',
          technicalspecificationsId: '',
        },
        conditions: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'input',
          },
          {
            label: '电子商务平台技术规范书ID',
            prop: 'technicalspecificationsId',
            type: 'input',
            labelWidth: '210px',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'text',
          },
          {
            label: '扩展编码',
            prop: 'extendCode',
            type: 'text',
          },
          {
            label: '电子商务平台技术规范书ID',
            prop: 'technicalspecificationsId',
            type: 'text',
          },
          {
            label: '状态',
            prop: 'status',
            type: 'text',
          },
        ],
      }
    };
    // 物料参考价格页面的表格数据配置
    this.tabList[3].dataConfig = {
      search: {
        labelWidth: '100px',
        resultKey: 'erpReferencePriceList',
        loading: false,
        form: {
          materialCode: '',
        },
        conditions: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '物资分类编码',
            prop: 'materialClassCode',
            type: 'text',
            width: '240',
          },
          {
            label: '物资分类名称',
            prop: 'materialClassName',
            type: 'text',
            width: '240',
          },
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'text',
            width: '240',
          },
          {
            label: '物料描述',
            prop: 'materialDesc',
            type: 'text',
          },
          {
            label: '参考价格',
            prop: 'purchasePrice',
            type: 'text',
            align: 'center',
            width: '240',
          },
        ],
      }
    };
    // 批次合理交货期要求页面的表格数据配置
    this.tabList[4].dataConfig = {
      search: {
        labelWidth: '100px',
        resultKey: 'data',
        loading: false,
        form: {
          divisionDesc: '',
          groupDesc: '',
          classDesc: '',
        },
        conditions: [
          {
            label: '大类描述',
            prop: 'divisionDesc',
            type: 'input',
          },
          {
            label: '中类描述',
            prop: 'groupDesc',
            type: 'input',
          },
          {
            label: '小类描述',
            prop: 'classDesc',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '大类描述',
            prop: 'divisionDesc',
            type: 'text',
          },
          {
            label: '中类描述',
            prop: 'groupDesc',
            type: 'text',
          },
          {
            label: '小类描述',
            prop: 'classDesc',
            type: 'text',
          },
          {
            label: '开标时间',
            prop: 'bidTime',
            type: 'text',
            align: 'center',
          },
          {
            label: '定标周期',
            prop: 'calibrationCycle',
            type: 'text',
            align: 'center',
            width: '160',
          },
          {
            label: '公示时间',
            prop: 'publicityTime',
            type: 'text',
            align: 'center',
            width: '160',
          },
          {
            label: '合同签订合理周期',
            prop: 'contractSignCycle',
            type: 'text',
            align: 'center',
            width: '160',
          },
          {
            label: '生产供货合理周期',
            prop: 'productSupplyCycle',
            type: 'text',
            align: 'center',
            width: '160',
          },
        ],
      }
    };
    // 固化ID页面的表格数据配置
    this.tabList[5].dataConfig = {
      search: {
        labelWidth: '100px',
        resultKey: 'weldingIdStatusList',
        loading: false,
        form: {
          materialCode: '',
          weldingId: '',
        },
        conditions: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'input',
          },
          {
            label: '固化ID',
            prop: 'weldingId',
            type: 'input',
          },
        ],
        searchCB: this.search,
        topOperates: []
      },
      table: {
        config: {
          select: false,
          selectCallback: () => { }
        },
        columns: [
          {
            label: '物料编码',
            prop: 'materialCode',
            type: 'text',
            width: '200',
          },
          {
            label: '物料描述',
            prop: 'materialDesc',
            type: 'text',
          },
          {
            label: '物料扩展描述',
            prop: 'materialExtendDesc',
            type: 'text',
          },
          {
            label: '固化ID',
            prop: 'weldingId',
            type: 'text',
            width: '220',
          },
          {
            label: '固化ID状态',
            prop: 'status',
            type: 'text',
            width: '180',
          },
          {
            label: '固化ID产业标识',
            prop: 'industryIdentity',
            type: 'text',
            width: '200',
          },
        ],
      }
    };
  },
  mounted() {
    // 页面加载成功后，加载当前页签的数据
    this.$refs[`dataList${this.tabIndex}`][0].search();
  },
  methods: {
    onTabClick(e) {
      this.tabIndex = Number(e.index);
      this.$log.debug('当前选中的页签索引为：', this.tabIndex);
      // 如果当前页签的页面数据为空，则调用查询接口进行数据查询
      if (!this.tabList[this.tabIndex].tableData || !this.tabList[this.tabIndex].tableData.data || !this.tabList[this.tabIndex].tableData.data.length) {
        const tabs = this.$refs[`dataList${this.tabIndex}`];
        if (tabs && tabs.length) {
          tabs[0].search();
        }
      }
    },
    search(pageInfo, searchForm) {
      const params = {
        ...pageInfo,
        ...searchForm,
      };
      const title = this.tabList[this.tabIndex].label;

      let searchFunction = null;
      switch (this.tabIndex) {
        case 0:
          this.$log.debug('优选清单页面列表数据查询');
          searchFunction = api.queryMaterialList(params);
          break;
        case 1:
          this.$log.debug('可视化物料管理页面列表数据查询');
          searchFunction = api.querySkipCheck(params);
          break;
        case 2:
          this.$log.debug('标准化目录页面列表数据查询');
          searchFunction = api.queryStandardCatalogue(params);
          break;
        case 3:
          this.$log.debug('物料参考价格页面列表数据查询');
          searchFunction = api.queryErpReferencePrice(params);
          break;
        case 4:
          this.$log.debug('批次合理交货期要求页面列表数据查询');
          searchFunction = api.queryReasonableDeliveryTime(params);
          break;
        case 5:
          this.$log.debug('固化ID页面列表数据查询');
          searchFunction = api.queryWeldingIdStatus(params);
          break;
      }
      if (!searchFunction) {
        this.$log.error(`查询${title}列表失败，未找到接口地址`);
        return;
      }
      this.tabList[this.tabIndex].dataConfig.search.loading = true;
      searchFunction.then((res) => {
        this.tabList[this.tabIndex].dataConfig.search.loading = false;
        if (res.success) {
          this.$log.debug(`查询${title}列表成功`, res.data);
          this.tabList[this.tabIndex].tableData = {
            data: res.data[this.tabList[this.tabIndex].dataConfig.search.resultKey],
            total: res.data.total,
          };
        } else {
          this.$log.error(`查询${title}列表失败，错误信息为：`, res.message);
          this.$message.error(`查询${title}列表失败：` + (res.message || ''));
        }
      }).catch((e) => {
        this.tabList[this.tabIndex].dataConfig.search.loading = false;
        this.$log.error(`查询${title}列表失败，错误信息为：`, e);
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.dataquery-page {}
</style>
